import React, { Component } from 'react'
import { Table, Switch, Space,Button ,message,Spin, Alert ,Modal,} from 'antd';
import {connect} from "react-redux"
import {SettingOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
import AddGoodType from '../../components/hangComponents/addGoodType'
import SearchGoodType from '../../components/hangComponents/searchGoodType'
import ChangeServeType from '../../components/hangComponents/changeGoodType.jsx'


  
class GoodsType extends Component {
    state={
        checkStrictly:true,
        rowSelection:{
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
              this.setState({
                ...this.state,
                keys:selectedRowKeys
              })
            },
            onSelect: (record, selected, selectedRows) => {
              console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
              console.log(selected, selectedRows, changeRows);
            },
          },
        addOpen:false,
        visible: false,
        keys:[],
        Visible2:false,
    }
    chan = (value) => {
      console.log(value);
      this.changeOpen()
    }
    componentDidMount(){
    //获取所有类型
        this.getAllType();
        console.log(this.props.Goods);
    }
    getAllType = () => {
        this.props.dispatch({
            type:"getGoodsType"
        })
    }
    //关闭add抽屉
    addClose = () => {
        this.setState({
            ...this.state,
            addOpen:false,
        })
    }
    //开启add抽屉
    addOpen = () => {
        this.setState({
            ...this.state,
            addOpen:true,
        })
    }
    //关闭修改抽屉
    changeClose = () => {
          this.setState({
              ...this.state,
              Visible2:false,
          })
      }
    //开启修改抽屉
    changeOpen = () => {
          this.setState({
              ...this.state,
              Visible2:true,
          })
      }
    //新增商品类型
    addOneType = (data) => {
        this.props.dispatch({
            type:"addOneGoodType",
            payload:data
        })
    }

    //搜索商品
    searchType = (data)=>{
      this.props.dispatch({
        type:"searchGoodType",
        payload:data
      })
    }

    //删除商品
    del = (close) =>{
      console.log(this.state.keys);
      this.props.dispatch({
        type:"delGoodType",
        payload:this.state.keys,
      })
      close()
    }
    
    confirm =()=> {
      Modal.confirm({
        title: '确认删除？',
        icon: <ExclamationCircleOutlined />,
        content: 'Bla bla ...',
        okText: '确认',
        cancelText: '取消',
        onOk:this.del
      });
    }



    shouldComponentUpdate(nextProps, nextState){
      if(nextProps.goods.addOK != this.props.goods.addOK && nextProps.goods.addOK==200){
        this.getAllType()
      message.success("添加成功");
      this.addClose()
      }else if (nextProps.goods.addOK != this.props.goods.addOK && nextProps.goods.addOK !=200&& nextProps.goods.addOK !=null) {
      message.success("添加失败");
      }

      if(nextProps.goods.delOK != this.props.goods.delOK && nextProps.goods.delOK==200){
        this.getAllType()
      message.success("删除成功");
      }else if (nextProps.goods.delOK != this.props.goods.delOK && nextProps.goods.delOK !=200 && nextProps.goods.delOK !=null) {
      message.success("删除失败");
      }
      return true
    }
   
 
    render() {
        const { rowSelection, checkStrictly} = this.state;
        const columns = [
          {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '名称',
            dataIndex: 'title',
            key: 'title',
            width: '12%',
          },
          {
            title: '状态',
            dataIndex: 'status',
            width: '30%',
            key: 'status',
          },
          {
              title: '操作',
              dataIndex: '',
              key: 'x',
              render: (value) => <SettingOutlined onClick={()=>this.chan(value)} style={{color:"#36a3ff",fontSize:"20px"}}/>,
            },
        ];
        return (
            <>
            <SearchGoodType
            searchType={this.searchType}
            getAllType={this.getAllType}
            ></SearchGoodType>
                      <Space style={{marginBottom:"10px"}}>
          <Button type="primary" ghost  onClick={this.addOpen}>
            新增
          </Button>
          <Button onClick={this.confirm}>
            删除
          </Button>
        </Space>
            <Table
            size="small"
              columns={columns}
              rowSelection={{ ...rowSelection, checkStrictly }}
            //   dataSource={data}
              dataSource={this.props.goods.GoodsType}

            />
            <AddGoodType 
            addStatus={this.state.addOpen}
            addClose={this.addClose}
            treeData={this.props.goods.GoodsType}
            addOneType={this.addOneType}
            ></AddGoodType>
            <ChangeServeType
            visible={this.state.Visible2}
            close={this.changeClose}
            open={this.changeOpen}
            >
            </ChangeServeType>
          </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        goods:state.goodRC
    }
}
export default connect(mapStateToProps)(GoodsType)
